<template>
  <div>
    <div class="deng">
      <el-input placeholder="请输入内容" v-model="queryModel.query"></el-input>
      <el-button
        icon="el-icon-search"
        :loading="queryLoaing"
        @click="
          queryModel.pagenum = 1;
          getUserList();
        "
      ></el-button>
      <el-button type="primary" @click="model={};$refs.d.show();">添加</el-button>
    </div>
    <!-- 表格 -->
      <Table 
        :loading="tableLoading" 
        :data="list"
        :cols="cols"
        :total="total"
         v-model="queryModel" 
         @change="getUserList">
            <template v-slot:state="{row}">
                    <el-switch 
                    @change="switchState(row)" 
                    v-model="row.mg_state">
                    </el-switch>
            </template>
              <template v-slot:action="{row}">
                     <el-button class="el-icon-edit" type="primary" size="mini" @click="model={...row};$refs.d.show();"></el-button>
                    <el-button class="el-icon-delete-solid" type="danger" size="mini" @click="deleteUser(row)"></el-button>
                    <el-button 
                    class="el-icon-s-tools" 
                    type="warning" 
                    size="mini" 
                    @click="model={...row};getRoleList()"></el-button>
               </template>
        </Table>
    <!-- <el-table :data="list" stripe style="width: 100%">
      <el-table-column type="index" label="#" width="180"> </el-table-column>
      <el-table-column prop="username" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>
      <el-table-column prop="mobile" label="手机"> </el-table-column>
      <el-table-column prop="role_name" label="角色"> </el-table-column>
      <el-table-column prop="mg_state" label="状态"> 
         <template>
               <el-switch
  
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="100"
    inactive-value="0">
  </el-switch>
         </template>
      </el-table-column>
      <el-table-column label="操作"> 
              <template>
                    <el-button class="el-icon-edit" type="primary" size="mini" ></el-button>
                    <el-button class="el-icon-delete-solid" type="danger" size="mini" ></el-button>
                    <el-button 
                    class="el-icon-s-tools" 
                    type="warning" 
                    size="mini" 
                 ></el-button>
               </template>
      </el-table-column>
    </el-table> -->
    <!-- 分页 -->
    <!-- <el-pagination
      @size-change="
        (v) => {
          queryModel.pagesize = v;
          getUserList();
        }
      "
      @current-change="
        (v) => {
          queryModel.pagenum = v;
          getUserList();
        }
      "
      :current-page="queryModel.pagenum"
      :page-sizes="[2, 5, 8, 10]"
      :page-size="queryModel.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination> -->
     <!-- 添加修改 -->
       <MyDialog :title="this.title+'用户'" ref="d" @confirm="confirm">
        <!-- {{model}} -->
         <MyForm
         ref="form"
          v-model="model"
         :opts="opts"
         
         >

         </MyForm>
             <!-- <el-form label-width="70px" :model="model" :rules="rules" ref="form">
                <el-form-item label="用户名" prop="username">
                    <el-input :disabled="!!model.id" v-model="model.username" :maxlength="10"></el-input>
                </el-form-item>
                <el-form-item v-if="!model.id" label="密码" prop="password">
                    <el-input type="password" v-model="model.password" :maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="model.email" :maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="model.mobile" :maxlength="11"></el-input>
                </el-form-item>
             </el-form> -->
        </MyDialog>
        <!-- 分配角色· -->
            <MyDialog title="分配角色" ref="ad" @confirm="changeRole">
        <p>
            当前的用户：{{model.username}}
        </p>
        <p>
            当前的角色：{{model.role_name}}
        </p>
        <p>分配新角色：
            <el-select v-model="model.rid">
                <el-option 
                v-for="item in roles"
                :key="item.id"
                :label="item.roleName"
                :value="item.id">
                </el-option>
            </el-select>
        </p>
    </MyDialog>
           <!-- <el-dialog
      :close-on-click-modal="false" 
      title="分配角色" 
      :visible.sync="assVisible">
     <p>
        当前的用户：{{model.username}}
    </p>
     <p>
        当前的角色：{{model.role_name}}
    </p>
     <p>分配新角色：
        <el-select v-model="model.rid">
            <el-option 
            v-for="item in roles"
            :key="item.id"
            :label="item.roleName"
            :value="item.id">
            </el-option>
        </el-select>
     </p>
             <div slot="footer">
                <el-button @click="assVisible=false">取消</el-button>
                <el-button type="primary" :loading="confirmLoaing" @click="changeRole">确定</el-button>
             </div>
        </el-dialog> -->
  </div>
</template>

<script>
import { getUsers,addUser,updataUser ,delUser,changeState} from "api/user";
import Table from '../../components/Table.vue'
import { pageMixins } from "@/mixins/baseMixins"
import MyDialog from '../../components/Dialog.vue'
import MyForm from '../../components/Form.vue'
import { getRoles, updataRole } from 'api/rights';

export default {
   components:{Table,MyDialog,MyForm},
   mixins: [pageMixins],
  name: "users",
  data() {
    return {
      // list: [],
      // queryLoaing: false,
      // total:0,
      
      // queryModel: {
      //   query: "",
      //   pagenum: 1,
      //   pagesize: 5,
      // },
      // assVisible:false,
      // confirmLoaing:false,
        tableLoading: false,
        model:{},
        //角色列表
        roles:[],
         rules: {
                username: [
                    { required: true, message: "用户名不能为空" },
                    { min: 3, max: 10, message: "用户名长度为3~10位" },
                ],
                password: [
                    { required: true, message: "密码不能为空" },
                    { min: 6, max: 15, message: "密码长度为6~15位" },
                ],
                email: [
                    { required: true, message: "邮箱不能为空" },
                    { type: "email", message: "邮箱格式不对" },
                ],
                mobile: [
                    { required: true, message: "手机不能为空" },
                    { pattern: /^1[3-9]\d{9}$/, message: "手机格式不对" },
                ],
            },
        cols: [
                {
                    title: "#",
                    type: "index",
                },
                {
                    title: "姓名",
                    name: "username",
                },
                {
                    title: "邮箱",
                    name: "email",
                },
                {
                    title: "手机",
                    name: "mobile",
                },
                {
                    title: "角色",
                    name: "role_name",
                },
                {
                    title: "状态",
                    slot: "state",
                },
                {
                    title: "操作",
                    slot: "action",
                    align: "center",
                    width: 270,
                },
            ],
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    async switchState({id,mg_state}){
          try {
            await changeState(id,mg_state);
            this.$message.success('状态变更成功')
            getUserList()
          } catch (error) {
            
          }
    },
      /**
         * 修改角色
         */
        async changeRole() {
            const ad = this.$refs.ad;
            try {
                ad.start();
                // this.confirmLoaing=true;
                await updataRole(this.model.id, this.model.rid);
                this.$message.success("角色修改成功");
                ad.hide();
                // this.assVisible=false;
                this.getUserList();
            }
            catch (error) {
                console.log(error);
            }
            ad.stop();
            // this.confirmLoaing=false;
        },
        /**
         * 获取角色列表
         */
        async getRoleList() {
            try {
                this.tableLoading = true;
                this.roles = await getRoles();
                const rid = this.roles.find((c) => c.roleName === this.model.role_name)?.id ??
                    this.roles[0].id;
                this.$set(this.model, "rid", rid);
                this.$refs.ad.show();
                // this.$refs.ad.start();
                // this.assVisible=true;
            }
            catch (error) { }
            this.tableLoading = false;
        },
    async deleteUser({id,username}){
         let res;
        try {
           await delUser(id);
           this.$message.success('删除成功')
           this.getUserList()
        } catch (error) {
            console.log(error)
        }
        res && res()
    },
    /**添加修改 */
       async confirm() {
            console.log(123);
            const d = this.$refs.d;
            try {
                // await this.$refs.form.validate();
                d.start();
                await (this.model.id ? updataUser : addUser)(this.model);
                d.hide();
                // this.$m.success(this.title + "成功");
                this.$message.success(this.title + '成功')
                this.getUserList();
            }
            catch (error) { 
                console.log(error);
            }
            d.stop();
        },
    async getUserList() {
      try {
        this.queryLoaing = true;
        const { total, users } = await getUsers(this.queryModel);
        this.total = total;
        this.list = users;
        console.log(this.list);
      } catch (error) {}
      this.queryLoaing = false;
    },
  },
 computed:{
      opts(){
           return {
                username:{
                    title:'用户名',
                    required:true,
                    max:10,
                    dis:!!this.model.id,
                    ph:"请输入用户名",
                    rules:[{min:5}] 
                },
                ...(this.model.id
                ?
                {}:{
                    password:{
                    title:'密码',
                    required:true,
                    type:'password',
                    max:15,
                    ph:"请输入密码",
                }
                }),
                email:{
                    title:'邮箱',
                    required:true,
                    max:30,
                    ph:"请输入邮箱",
                    rules:[{ type: "email", message: "邮箱格式不对" }]
                },
                mobile:{
                    title:'手机',
                    required:true,
                    type:'mobile',
                    max:11,
                    ph:"请输入手机",
                    rules:[{ pattern:/^1[3-9]\d{9}$/, message: "手机格式不对" }]
                }
            }
 },
  title() {
            return this.model.id ? "修改" : "添加";
        }
}
}
</script>

<style lang="scss" scoped>
.deng {
  display: flex;
  width: 300px;
  margin-left: 20px;
}
</style>